<template>
  <div class="dashboard-container">
    <!-- 能耗概览整体卡片 -->
    <div class="energy-overview-container">
      <!-- 标题区域 -->
      <div class="overview-header">
        <h1 class="page-title">全厂能耗统计</h1>
        <div class="header-controls">
          <div class="date-type-selector">
            <span
              v-for="type in dateTypes"
              :key="type.value"
              :class="{ active: activeDateType === type.value }"
              @click="handleDateTypeChange(type.value)"
            >
              {{ type.label }}
            </span>
          </div>
          <el-date-picker
            v-model="selectedDate"
            :type="datePickerType"
            :format="dateFormat"
            :value-format="dateFormat"
            placeholder="选择日期"
            class="date-picker"
            @change="handleDateChange"
          />
          <button class="search-btn" @click="handleSearch">搜索</button>
        </div>
      </div>

      <!-- 能耗卡片 -->
      <div class="energy-overview">
        <div
          class="energy-card"
          v-for="energy in energyData"
          :key="energy.type"
        >
          <div class="card-icon" :style="{ backgroundColor: energy.color }">
            <svg-icon :icon-class="energy.icon" />
          </div>
          <div class="card-content">
            <div class="card-title">{{ energy.name }}</div>
            <div class="card-value">
              <count-to
                :end-val="parseFloat(energy.value)"
                :decimals="2"
                :duration="2000"
                :font-size="'24px'"
                :font-weight="'600'"
                :color="'#303133'"
              />
              <span class="unit">{{ energy.unit }}</span>
            </div>
            <div class="card-trend">
              <span class="trend-label">环比:</span>
              <span
                class="trend-value"
                :class="{
                  positive: energy.monthTrend > 0,
                  negative: energy.monthTrend < 0,
                }"
              >
                {{ energy.monthTrend > 0 ? "+" : "" }}{{ energy.monthTrend }}%
              </span>
            </div>
            <div class="card-year-trend">
              <span class="trend-label">同比:</span>
              <span class="trend-value">{{ energy.yearTrend }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <!-- 左侧：能耗趋势图 -->
      <div class="chart-container trend-chart">
        <div class="chart-header">
          <h3>能耗趋势</h3>
          <p>实时能耗数据(单位 tce)</p>
        </div>
        <div class="chart-content">
          <v-chart class="chart" :option="trendChartOption" />
        </div>
      </div>

      <!-- 右侧：能耗占比图 -->
      <div class="chart-container proportion-chart">
        <div class="chart-header">
          <h3>全厂能耗占比</h3>
          <p>能源类型分布(单位 tce)</p>
        </div>
        <div class="chart-content">
          <v-chart class="chart" :option="proportionChartOption" />
        </div>
      </div>
    </div>

    <!-- 底部图表区域 -->
    <div class="bottom-charts">
      <!-- 左侧：设备能耗排名 -->
      <div class="chart-container ranking-chart">
        <div class="chart-header">
          <h3>设备能耗排名TOP5</h3>
          <p>设备能耗统计(单位 tce)</p>
        </div>
        <div class="chart-content">
          <div class="ranking-list">
            <div
              class="ranking-item"
              v-for="(item, index) in rankingData"
              :key="index"
            >
              <div class="rank-number">{{ index + 1 }}</div>
              <div class="rank-info">
                <div class="rank-name">{{ item.name }}</div>
                <div class="rank-bar">
                  <div
                    class="bar-fill"
                    :style="{
                      width: item.percentage + '%',
                      backgroundColor: item.color,
                    }"
                  ></div>
                </div>
              </div>
              <div class="rank-value">{{ item.value }} tce</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：尖峰平谷占比 -->
      <div class="chart-container peak-valley-chart">
        <div class="chart-header">
          <h3>尖峰平谷占比</h3>
          <p>用电时段分布(单位 kWh)</p>
        </div>
        <div class="chart-content">
          <v-chart class="chart" :option="peakValleyChartOption" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart from "vue-echarts";
import { ElDatePicker } from "element-plus";
import CountTo from "@/components/CountTo/index.vue";
import { getStatisticsGroupPie, getStatisticsSummary, getTop5, getsharpValley } from "@/api/stat/home";

// 注册ECharts组件
use([
  CanvasRenderer,
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);

// 日期类型选择
const activeDateType = ref("day");
const selectedDate = ref("");

const dateTypes = reactive([
  { label: "天", value: "day" },
  { label: "月", value: "month" },
  { label: "年", value: "year" },
]);

// 计算日期选择器类型和格式
const datePickerType = computed(() => {
  switch (activeDateType.value) {
    case "day":
      return "date";
    case "month":
      return "month";
    case "year":
      return "year";
    default:
      return "date";
  }
});

const dateFormat = computed(() => {
  switch (activeDateType.value) {
    case "day":
      return "YYYY-MM-DD";
    case "month":
      return "YYYY-MM";
    case "year":
      return "YYYY";
    default:
      return "YYYY-MM-DD";
  }
});

// 处理日期类型变化
const handleDateTypeChange = (type) => {
  activeDateType.value = type;
  
  const now = new Date();
  // 根据类型调整默认日期
  switch (type) {
    case "day":
      selectedDate.value = now.toISOString().split('T')[0];
      break;
    case "month":
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      selectedDate.value = `${year}-${month}`;
      break;
    case "year":
      selectedDate.value = String(now.getFullYear());
      break;
  }
};

// 处理日期变化
const handleDateChange = (date) => {
  selectedDate.value = date;
  console.log("日期变化:", date);
};

// 能耗数据
const energyData = reactive([
  {
    type: "water",
    name: "水",
    value: "8.73",
    unit: "立方米",
    monthTrend: -17.4,
    yearTrend: "0.0",
    color: "#67C23A",
    icon: "water",
  },
  {
    type: "electricity",
    name: "电",
    value: "648",
    unit: "千瓦时",
    monthTrend: -17.4,
    yearTrend: "0.0",
    color: "#E6A23C",
    icon: "electricity",
  },
  {
    type: "natural_gas",
    name: "气",
    value: "25.44",
    unit: "立方米",
    monthTrend: -17.4,
    yearTrend: "0.0",
    color: "#409EFF",
    icon: "gas",
  },
  {
    type: "steam",
    name: "热",
    value: "15.26",
    unit: "J",
    monthTrend: -17.5,
    yearTrend: "0.0",
    color: "#16A5B7",
    icon: "heat",
  },
]);

// 能耗占比数据
const proportionData = reactive([
  { name: "国网电", value: "796.39", percentage: "74.78", color: "#16A5B7" },
  { name: "蒸汽", value: "185.30", percentage: "17.40", color: "#4fdaca" },
  { name: "压缩空气", value: "56.93", percentage: "5.35", color: "#32b7cb" },
  { name: "天然气", value: "18.17", percentage: "1.71", color: "#409EFF" },
  { name: "自来水", value: "8.23", percentage: "0.77", color: "#67C23A" },
]);

// 排名数据
const rankingData = reactive([
  {
    name: "监测车间高压配电室一中2#变",
    value: "12.5",
    percentage: 100,
    color: "#16A5B7",
  },
  {
    name: "加工车间低压配电室1#泵",
    value: "8.3",
    percentage: 66,
    color: "#67C23A",
  },
  {
    name: "加车间低压配电室6#泵",
    value: "5.7",
    percentage: 46,
    color: "#409EFF",
  },
  { name: "配电室3#变压器", value: "4.2", percentage: 34, color: "#4fdaca" },
  { name: "配电室5#变压器", value: "3.1", percentage: 25, color: "#32b7cb" },
]);

// 尖峰平谷数据
const peakValleyData = reactive([
  { name: "平(kWh)", value: "228.69", percentage: "35.29", color: "#409EFF" },
  { name: "尖(kWh)", value: "190.58", percentage: "29.41", color: "#16A5B7" },
  { name: "峰(kWh)", value: "65.34", percentage: "10.08", color: "#4fdaca" },
  { name: "谷(kWh)", value: "0.00", percentage: "0.00", color: "#67C23A" },
]);

// 能耗趋势图配置
const trendChartOption = computed(() => {
  // 获取图例数据
  const legendData = Object.values(trendSeriesData).map(item => item.name);
  
  // 构建系列数据
  const series = Object.values(trendSeriesData).map(item => ({
    name: item.name,
    type: "bar",
    stack: "total",
    data: item.data,
    itemStyle: { color: item.color },
  }));
  
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: legendData,
      bottom: 10,
      textStyle: {
        fontSize: 12,
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: trendTimeData.value,
      axisLabel: {
        fontSize: 10,
        rotate: trendTimeData.value.length > 12 ? 45 : 0,
      },
    },
    yAxis: {
      type: "value",
      name: "能耗",
      axisLabel: {
        fontSize: 10,
      },
    },
    series: series,
  };
});

// 能耗占比图配置
const proportionChartOption = computed(() => {
  // 从 proportionData 构建饼图数据
  const pieData = proportionData.map(item => ({
    value: parseFloat(item.value) || 0,
    name: item.name,
    itemStyle: { color: item.color }
  }));

  return {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      left: "left",
      top: "center",
      textStyle: {
        fontSize: 12,
      },
    },
    series: [
      {
        name: "能耗占比",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["60%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "18",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: pieData,
      },
    ],
  };
});

// 尖峰平谷占比图配置
const peakValleyChartOption = computed(() => {
  // 从 peakValleyData 构建饼图数据
  const pieData = peakValleyData.map(item => ({
    value: parseFloat(item.value) || 0,
    name: item.name,
    itemStyle: { color: item.color }
  }));

  return {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      left: "left",
      top: "center",
      textStyle: {
        fontSize: 12,
      },
    },
    series: [
      {
        name: "尖峰平谷",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["60%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "18",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: pieData,
      },
    ],
  };
});

// 能耗类型映射
const energyTypeMap = {
  10: { key: 'water', name: '水', icon: 'water', color: '#67C23A' },
  20: { key: 'electricity', name: '电', icon: 'electricity', color: '#E6A23C' },
  30: { key: 'natural_gas', name: '气', icon: 'gas', color: '#409EFF' },
  40: { key: 'steam', name: '热', icon: 'heat', color: '#16A5B7' },
  50: { key: 'photovoltaic', name: '光伏', icon: 'electricity', color: '#909399' }
};

// 趋势图时间数据
const trendTimeData = ref([]);
const trendSeriesData = reactive({});

// 计算环比和同比变化
const calculateTrend = (current, compare) => {
  if (!compare || compare === 0) return 0;
  return (((current - compare) / compare) * 100).toFixed(1);
};

// 加载能耗统计汇总数据
const loadStatisticsSummary = async () => {
  try {
    const response = await getStatisticsSummary({
      statTime: selectedDate.value
    });
    
    console.log('能耗统计汇总数据:', response);
    
    if (response && response.code === 200 && response.data) {
      const { dayData, beforedayData, lastYearDayData, dayListData } = response.data;
      
      // 更新能耗卡片数据
      if (dayData && dayData.length > 0) {
        // 清空现有数据
        energyData.length = 0;
        
        // 只显示水、电、气、热四种
        const displayTypes = [10, 20, 30, 40];
        
        dayData.forEach(item => {
          if (displayTypes.includes(item.energyType)) {
            const typeInfo = energyTypeMap[item.energyType];
            
            // 查找对应的环比数据
            const beforeItem = beforedayData?.find(b => b.energyType === item.energyType);
            const monthTrend = calculateTrend(item.sumValue, beforeItem?.sumValue);
            
            // 查找对应的同比数据
            const lastYearItem = lastYearDayData?.find(l => l.energyType === item.energyType);
            const yearTrend = calculateTrend(item.sumValue, lastYearItem?.sumValue);
            
            // 定义默认单位映射
            const defaultUnits = {
              10: '吨',      // 水
              20: 'kWh',    // 电
              30: 'm³',     // 气
              40: 'GJ'      // 热
            };
            
            energyData.push({
              type: typeInfo.key,
              name: typeInfo.name,
              value: (item.sumValue || 0).toFixed(2),
              unit: item.energyTypeDw || defaultUnits[item.energyType] || '',
              monthTrend: parseFloat(monthTrend),
              yearTrend: yearTrend,
              color: typeInfo.color,
              icon: typeInfo.icon
            });
          }
        });
        
        // 按水、电、气、热的顺序排序
        energyData.sort((a, b) => {
          const order = { water: 0, electricity: 1, natural_gas: 2, steam: 3 };
          return order[a.type] - order[b.type];
        });
      }
      
      // 更新能耗占比数据
      if (dayData && dayData.length > 0) {
        // 计算总值
        const totalValue = dayData.reduce((sum, item) => sum + (item.sumValue || 0), 0);
        
        // 清空原有数据
        proportionData.length = 0;
        
        // 填充占比数据
        dayData.forEach(item => {
          const typeInfo = energyTypeMap[item.energyType];
          if (typeInfo) {
            const percentage = totalValue > 0 ? ((item.sumValue / totalValue) * 100).toFixed(2) : 0;
            proportionData.push({
              name: typeInfo.name,
              value: (item.sumValue || 0).toFixed(2),
              percentage: percentage,
              color: typeInfo.color
            });
          }
        });
        
        // 按占比从大到小排序
        proportionData.sort((a, b) => parseFloat(b.percentage) - parseFloat(a.percentage));
      }
      
      // 更新能耗趋势图数据
      if (dayListData && dayListData.length > 0) {
        // 提取时间维度
        const timeSet = new Set();
        dayListData.forEach(item => {
          if (item.hourName) {
            timeSet.add(item.hourName);
          }
        });
        trendTimeData.value = Array.from(timeSet).sort();
        
        // 按能源类型组织数据
        const seriesMap = {};
        dayListData.forEach(item => {
          const typeInfo = energyTypeMap[item.energyType];
          if (typeInfo) {
            if (!seriesMap[item.energyType]) {
              seriesMap[item.energyType] = {
                name: typeInfo.name,
                color: typeInfo.color,
                data: []
              };
            }
          }
        });
        
        // 填充数据
        trendTimeData.value.forEach(time => {
          Object.keys(seriesMap).forEach(type => {
            const item = dayListData.find(d => d.energyType === parseInt(type) && d.hourName === time);
            seriesMap[type].data.push(item ? (item.sumValue || 0) : 0);
          });
        });
        
        // 更新响应式数据
        Object.keys(trendSeriesData).forEach(key => delete trendSeriesData[key]);
        Object.assign(trendSeriesData, seriesMap);
      }
    }
  } catch (error) {
    console.error("加载能耗统计汇总数据失败:", error);
  }
};

// 加载设备能耗排名TOP5数据
const loadTop5Data = async () => {
  try {
    const response = await getTop5({
      statTime: selectedDate.value
    });
    
    console.log('设备能耗排名TOP5数据:', response);
    
    if (response && response.code === 200 && response.data) {
      // 清空原有数据
      rankingData.length = 0;
      
      const dayListData = response.data.dayListData;
      if (dayListData && dayListData.length > 0) {
        // 找到最大值用于计算百分比
        const maxValue = Math.max(...dayListData.map(item => parseFloat(item.sumValue || 0)));
        
        // 定义颜色数组
        const colors = ["#16A5B7", "#67C23A", "#409EFF", "#4fdaca", "#32b7cb"];
        
        dayListData.forEach((item, index) => {
          const value = parseFloat(item.sumValue || 0);
          const percentage = maxValue > 0 ? (value / maxValue) * 100 : 0;
          
          rankingData.push({
            name: item.deviceName || '',
            value: value.toFixed(1),
            percentage: percentage.toFixed(0),
            color: colors[index] || "#16A5B7"
          });
        });
      }
    }
  } catch (error) {
    console.error("加载设备能耗排名TOP5数据失败:", error);
  }
};

// 加载尖峰平谷占比数据
const loadPeakValleyData = async () => {
  try {
    const response = await getsharpValley({
      statTime: selectedDate.value
    });
    
    console.log('尖峰平谷占比数据:', response);
    
    if (response && response.code === 200 && response.data) {
      // 清空原有数据
      peakValleyData.length = 0;
      
      const stats = response.data.stats;
      if (stats && stats.length > 0) {
        // 定义类型名称和颜色映射
        const typeNameMap = {
          '尖峰': '尖(kWh)',
          '高峰': '峰(kWh)',
          '平段': '平(kWh)',
          '谷段': '谷(kWh)'
        };
        
        const colorMap = {
          '尖峰': "#16A5B7",
          '高峰': "#4fdaca",
          '平段': "#409EFF",
          '谷段': "#67C23A"
        };
        
        stats.forEach(item => {
          const costType = item.costType;
          peakValleyData.push({
            name: typeNameMap[costType] || costType,
            value: (item.sumValue || 0).toFixed(2),
            percentage: 0, // 百分比由ECharts自动计算
            color: colorMap[costType] || "#409EFF"
          });
        });
      }
    }
  } catch (error) {
    console.error("加载尖峰平谷占比数据失败:", error);
  }
};

// 处理搜索
const handleSearch = () => {
  console.log("搜索参数:", {
    dateType: activeDateType.value,
    selectedDate: selectedDate.value,
  });
  loadStatisticsSummary();
  loadTop5Data();
  loadPeakValleyData();
};

// 页面初始化
onMounted(() => {
  // 初始化日期为当天
  const now = new Date();
  selectedDate.value = now.toISOString().split('T')[0];
  
  // 加载数据
  loadStatisticsSummary();
  loadTop5Data();
  loadPeakValleyData();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  background: #f1f2f5;
  height: 100%;
  overflow-y: auto;
}

.energy-overview-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;

  .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 0 20px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;

    .page-title {
      font-size: 20px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: linear-gradient(135deg, #16a5b7, #4fdaca);
        border-radius: 2px;
      }
    }

    .header-controls {
      display: flex;
      align-items: center;
      gap: 16px;

      .date-type-selector {
        display: flex;
        gap: 4px;
        background: #f8f9fa;
        padding: 4px;
        border-radius: 12px;
        border: 1px solid #e9ecef;

        span {
          padding: 8px 16px;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          color: #6c757d;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

          &.active {
            background: linear-gradient(135deg, #16a5b7, #4fdaca);
            color: white;
            box-shadow: 0 4px 12px rgba(22, 165, 183, 0.3);
          }

          &:hover:not(.active) {
            background: white;
            color: #16a5b7;
          }
        }
      }

      .date-picker {
        :deep(.el-input__wrapper) {
          border-radius: 6px;
          border: 1px solid #dcdfe6;

          &:hover {
            border-color: #16a5b7;
          }

          &.is-focus {
            border-color: #16a5b7;
            box-shadow: 0 0 0 2px rgba(22, 165, 183, 0.2);
          }
        }

        :deep(.el-input__inner) {
          font-size: 14px;
          color: #606266;
        }
      }

      .search-btn {
        padding: 10px 20px;
        background: #16a5b7;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: #4fdaca;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(22, 165, 183, 0.3);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }
  }

  .energy-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 20px 20px 20px;

    .energy-card {
      background: #fafbfc;
      border-radius: 8px;
      padding: 20px;
      border: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      &:hover {
        background: #f8f9fa;
        border-color: #16a5b7;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .card-icon {
        width: 56px;
        height: 56px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #16a5b7 !important; // 统一使用系统主题色

        .svg-icon {
          font-size: 28px;
          color: #fff !important; // 强制白色图标
        }
      }

      .card-content {
        flex: 1;

        .card-title {
          font-size: 16px;
          color: #606266;
          margin-bottom: 8px;
          font-weight: 600;
          line-height: 1.2;
        }

        .card-value {
          font-size: 24px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 6px;
          display: flex;
          align-items: baseline;
          gap: 4px;

          .unit {
            font-size: 16px;
            color: #606266;
            font-weight: 500;
            margin-left: 4px;
          }
        }

        .card-trend,
        .card-year-trend {
          font-size: 12px;
          margin-bottom: 3px;

          .trend-label {
            color: #909399;
          }

          .trend-value {
            margin-left: 4px;

            &.positive {
              color: #67c23a;
            }

            &.negative {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }
}

.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.bottom-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .chart-header {
    padding: 20px 20px 0 20px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;

    .header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .header-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0;
      position: relative;
      line-height: 1.2;

      &::before {
        content: "";
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: linear-gradient(135deg, #16a5b7, #4fdaca);
        border-radius: 2px;
      }
    }

    p {
      font-size: 14px;
      color: #666;
      margin: 0;
      font-weight: 500;
    }
  }

  .chart-content {
    padding: 20px;
    height: 300px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}

// trend-chart样式已移除，使用ECharts内置legend

.ranking-chart {
  .ranking-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .ranking-item {
      display: flex;
      align-items: center;
      gap: 12px;

      .rank-number {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #16a5b7;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
      }

      .rank-info {
        flex: 1;

        .rank-name {
          font-size: 12px;
          color: #606266;
          margin-bottom: 4px;
        }

        .rank-bar {
          height: 8px;
          background-color: #f5f7fa;
          border-radius: 4px;
          overflow: hidden;

          .bar-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
            background: linear-gradient(
              135deg,
              #4fdaca 0%,
              #16a5b7 100%
            ) !important;
          }
        }
      }

      .rank-value {
        font-size: 12px;
        color: #303133;
        font-weight: 500;
      }
    }
  }
}
</style>
